import { useCarStore } from '@/stores/car'
import { useConfigDeviceStore } from '@/stores/configDevice'
import { ElButton, ElDivider, ElTable, ElTableColumn } from 'element-plus'
import { defineComponent, Fragment, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'
import type { DeviceData } from '../types'
import DeviceForm from './DeviceForm'

export default defineComponent({
  setup() {
    const { t } = useI18n()
    const configDeviceStore = useConfigDeviceStore()
    const carStore = useCarStore()
    const route = useRoute()
    onMounted(() => {
      if (route.query.code) {
        carStore.setCurrentCar(route.query.code.toString())
        configDeviceStore.getList()
      }
    })
    return () => (
      <Fragment>
        <ElButton size="large" onClick={configDeviceStore.handleVisible}>
          {t('tian-jia')}
        </ElButton>
        <ElDivider></ElDivider>
        <ElTable data={configDeviceStore.tableData}>
          {configDeviceStore.columns.map((item) => (
            <ElTableColumn key={item.prop} prop={item.prop} label={item.label}>
              {{
                default: ({ row }: { row: DeviceData }) => item.slot && item.slot(row)
              }}
            </ElTableColumn>
          ))}
        </ElTable>
        <DeviceForm />
      </Fragment>
    )
  }
})
